<template>
  <div>
    <el-steps style="max-width: 600px;margin: 0 auto;background:transparent;" :active="active" :space="200" align-center finish-status="success">
      <el-step title="基本信息" :icon="Document" />
      <el-step title="使用说明" :icon="UploadFilled" />
    </el-steps>
    <div class="step_content">
      <el-form v-show="active===0" :model="form" :inline="true" ref="form" label-position="left" :rules="rules" label-width="150px">
        <div class="step_title">资本化信息</div>
        <el-form-item label="资本化时间点" prop="dateRange">
          <el-date-picker v-model="form.dateRange" value-format="YYYY-MM-DD" type="date" placeholder="请选择时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="资本化说明" prop="projectNo" style="width:calc(100% - 32px);">
          <el-input v-model="form.projectNo" placeholder="请输入资本化说明" clearable type="textarea" maxlength="200" show-word-limit :autosize="{ minRows: 2, maxRows: 4 }" />
        </el-form-item>
        <div class="step_title">数据资源</div>
        <el-form-item label="资源类型" prop="amount">
          <el-select v-model="form.amount" placeholder="请选择资源类型" clearable>
            <el-option label="1" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资源名称" prop="projectName">
          <el-input v-model="form.projectName" readonly placeholder="请输入资源名称" clearable />
        </el-form-item>
        <el-form-item label="开放等级" prop="amount">
          <el-select v-model="form.amount" placeholder="请选择开放等级" clearable>
            <el-option label="1" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="安全级别" prop="amount">
          <el-select v-model="form.amount" placeholder="请选择安全级别" clearable>
            <el-option label="1" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据资源简介" prop="projectNo" style="width:calc(100% - 32px);">
          <el-input v-model="form.projectNo" placeholder="请输入" clearable type="textarea" maxlength="200" show-word-limit :autosize="{ minRows: 2, maxRows: 4 }" />
        </el-form-item>
        <div class="step_title">技术数据</div>
        <el-button @click="addResource" icon="Plus">添加数据</el-button>
        <div v-for="item in form.techList">
          <el-form-item label="机房类型" prop="amount">
            <el-select v-model="item.type" placeholder="请选择安全级别" clearable>
              <el-option label="1" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据库服务器类型" prop="amount">
            <el-select v-model="item.sourceType" placeholder="请选择安全级别" clearable>
              <el-option label="1" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Database" prop="projectNo">
            <el-input v-model="item.database" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="地址" prop="projectNo">
            <el-input v-model="item.path" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="端口" prop="projectNo">
            <el-input v-model="item.port" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="用户名" prop="projectNo">
            <el-input v-model="item.username" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="密码" prop="projectNo">
            <el-input v-model="item.password" type="password" placeholder="请输入" clearable />
          </el-form-item>
          <el-button type="primary" @click="handleLink">连接数据库</el-button>
        </div>
        <div class="step_title">业务数据</div>
        <el-form-item label="业务场景" prop="projectNo" style="width:calc(100% - 32px);">
          <el-input v-model="form.projectNo" placeholder="主要是对改数据资源适应业务场景的具体描述" clearable type="textarea" maxlength="200" show-word-limit :autosize="{ minRows: 2, maxRows: 4 }" />
        </el-form-item>
      </el-form>
      <div v-show="active===1">
        <div class="step_title">使用说明</div>
        <el-form-item label="提供方式" prop="projectType">
          <el-radio-group v-model="form.projectType">
            <el-radio :label="1">数据集</el-radio>
            <el-radio :label="2">数据报告</el-radio>
            <el-radio :label="3">数据接口</el-radio>
            <el-radio :label="4">其他产品</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="step_title">资料上传</div>
        <el-alert show-icon :title="uploadText" type="warning" :closable="false" style="margin-bottom: 10px;" />
        <FileUpload :limit="1" :fileSize="10" :fileType="['pdf']" :isShowTip="false" v-model="fileUrl" :drag="true">
          <template #content>
            <el-icon class="el-icon--upload">
              <upload-filled />
            </el-icon>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </template>
        </FileUpload>
      </div>
    </div>
    <div class="step_footer">
      <el-button @click="cancle">取消</el-button>
      <el-button @click="pre">上一步</el-button>
      <el-button v-if="active!==1" type="primary" @click="next">下一步</el-button>
      <el-button v-if="active===1" type="primary" @click="submit">提交</el-button>
    </div>
  </div>
</template>
<script setup name="Test">
import { UploadFilled, Document } from '@element-plus/icons-vue'
import { onMounted } from 'vue';
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const active = ref(0)
const fileUrl = ref('')
const uploadText = ref('请上传所需资料包括但不限于采购计划书、采购审批单、经济可行性分析报告、组织架构说明书')
const data = reactive({
  form: {
    projectName: 'casdfas',
    projectNo: '',
    projectStage: '',
    projectMethod: '',
    projectType: 1,
    projectStartTime: '',
    projectEndTime: '',
    projectAmount: '',
    projectResult: '',
    dateRange: '',
    phone: '',
    person: '',
    amount: '',
    fileUrl: '',
    techList: []
  },
  rules: {
    projectNo: [{ required: true, message: "请输入项目编码", trigger: "blur" }],
    projectName: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
    projectType: [{ required: true, message: "请选择项目类型", trigger: "change" }],
    dateRange: [{ required: true, message: "请输入项目时间", trigger: "change" }],
    // phone: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
    // person: [{ required: true, message: "请输入项目负责人", trigger: "blur" }],
    desc: [{ required: true, message: "请输入项目简介", trigger: "blur" }],
    amount: [{ required: true, message: "请输入采购金额", trigger: "blur" }],
  }
});

const { form, rules } = toRefs(data);
const pre = () => {
  active.value--
}
const next = () => {
  active.value++
  if (active.value === 0) {
    proxy.$refs["form"].validate(valid => {
      if (valid) {
        // active.value++
      }
    })
  }
}
const submit = () => {

}
const cancle = () => {
  router.push({
    path: '/PM/list'
  })
}
const addResource = () => {
  form.value.techList.push({
    type: '',
    sourceType: '',
    database: '',
    path: '',
    port: '',
    username: '',
    password: '',
  })
}
const handleLink = () => {

}
onMounted(() => {
  const type = route.query.type
  uploadText.value = type === 1 ? '请上传所需资料包括但不限于技术可行性分析报告、成果价值分析报告、资本化评审意见书、数据资源使用说明' :
    type === 2 ? '请上传所需资料包括但不限于技术可行性分析报告、成果价值分析报告、资本化评审意见书、数据资源使用说明' :
      'type'
})
</script>

<style lang="scss" scoped>
.step_content {
  height: calc(100vh - 180px);
  overflow: auto;
  padding: 20px 60px;
}
.step_title {
  line-height: 20px;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-left: 10px;
  margin: 20px 0 20px;
  &::before {
    position: absolute;
    left: 0;
    height: 20px;
    width: 4px;
    background-color: #3970e3;
    content: "";
  }
}
.step_upload {
  margin-top: 10px;
}
.step_footer {
  text-align: center;
}
:deep(.el-form--inline .el-form-item) {
  width: calc(50% - 32px);
}
</style>